<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>交易记录</title>
  <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/framework/reset.css">
  <link rel="stylesheet" href="../static/css/footer.css">
  <link rel="stylesheet" href="../static/css/transrecord.css">
</head>

<body>
  <div class="wrapper">
    <header>
      <i class="fa fa-angle-left fa-2x" onclick="location.href='/accountList'"></i>
      <p>交易记录</p>
      <!--将来header使用弹性布局，令交易记录四个字居中能用到 -->
      <p></p>
    </header>
    <div class="total">
      <!-- 余额区域 -->
      <div class="balance">
        当前账户余额：<i class="fa fa-jpy"></i>20
      </div>
      <!-- 收支区域 -->
      <div class="IncomeAndExpense">
        <!-- 总收入 -->
        <div class="income">
          总收入：
          <i class="fa fa-plus"></i>
          <i class="fa fa-jpy"></i>25
        </div>
        <!-- 总支出 -->
        <div class="expense">
          总支出：
          <i class="fa fa-minus"></i>
          <i class="fa fa-jpy"></i>5
        </div>
      </div>
    </div>
    <ul class="transrecordList">
      <li>
        <div class="account">
          <p>交易类型：存款</p>
          <p>交易时间：2005-1-1</p>
        </div>
        <div class="money">
          <i class="fa fa-plus"></i>
          <i class="fa fa-jpy"></i>25
        </div>
      </li>
      <li>
        <div class="account">
          <p>交易类型：转账</p>
          <p>交易人：李四</p>
          <p>账号：623***111</p>
          <p>交易时间：2005-1-1</p>
        </div>
        <div class="money">
          <i class="fa fa-minus"></i>
          <i class="fa fa-jpy"></i>5
        </div>
      </li>

    </ul>
    <!-- 底部功能区 -->
    <ul class="footer">
      <li>
        <i class="fa fa-home"></i>
        <p>首页</p>
      </li>
      <li>
        <i class="fa fa-compass"></i>
        <p>发现</p>
      </li>
      <li>
        <i class="fa fa-user-o"></i>
        <p>账户</p>
      </li>
    </ul>

  </div>
</body>

</html>